<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 1rem;
            text-align: center;
        }

        nav {
            background-color: #555;
            color: #fff;
            padding: 1rem;
            text-align: center;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0.5rem 1rem;
            margin: 0 1rem;
        }

        main {
            padding: 2rem;
        }

        footer {
            background-color: #333;
            color: #fff;
            padding: 1rem;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<header>
    <h1>管理系统</h1>
</header>

<nav id="app">
    <!-- 使用Vue来动态生成导航链接 -->
    <a v-for="(link, page) in pages" :key="page" @click="handleNavigation(page)">{{ link }}</a>
</nav>

<main>
    <!-- 使用Vue来动态渲染主要内容区域 -->
    <h2>{{ pageTitle }}</h2>
    <p>{{ pageDescription }}</p>
</main>

<footer>
    版权所有 © 2022 管理系统
</footer>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 导航链接和对应的页面
            pages: {
                home: '首页',
                user: '用户管理',
                product: '产品管理',
                order: '订单管理',
            },
            // 当前页面的标题和描述
            pageTitle: '欢迎使用管理系统',
            pageDescription: '这是一个简单的管理系统界面。',
        },
        methods: {
            // 处理导航点击事件
            handleNavigation(page) {
                // 发送HTTP请求到后端接口
                fetch(`/api/${page}`)
                    .then(response => response.json())
                    .then(data => {
                        // 更新当前页面的标题和描述
                        this.pageTitle = page;
                        this.pageDescription = data.description;
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            }
        }
    });
</script>

</body>
</html>
